

/**
 * Created by mapbar_front on 2018/3/14.
 */

import React,{ Component } from 'react';
import { Form, Icon, Input, Button,Select, } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

//水平登录栏，常用在顶部导航栏中
class Select1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isTrue: true,
            childrens: ['a10','a11','a12']
        }
    }
    componentDidMount() {
        this.props.form.validateFields();
    }
    /**
     *
     * onSubmitEvent() 提交
     */
    onSubmitEvent(e) {
        e.preventDefault();
        console.log("提交");
        this.props.form.validateFields((err,value)=>{
            console.log('value是',value);
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        let children = this.state.childrens.map((item,index)=>{
            return (
                <Option key={index} value={ item }>
                    { item }
                </Option>
            )
        })
        return (
            <Form onSubmit={ this.onSubmitEvent.bind(this) }>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('userName',{
                            rules: [
                                { required: true, message: '请输入你的姓名!'},
                                { max: 30,message: '不能超过30个字符'}
                            ]
                        })(
                            <Select
                                mode="tags"
                                style={{ width: '100%' }}
                                onChange={ this.handleChange}
                                tokenSeparators={[',']}
                            >
                                { children }
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('password',{
                            rules: [{ required: true, message: '请输入你的密码!' }],
                        })(
                            <Input prefix={ <Icon type="lock" style={{ width: '50%',color: 'rgba(0,0,0,0.25)'}} />}
                                   placeholder="请输入密码"
                                   type="password"
                                   //onChange = { this.passwordChange.bind(this) }
                            />
                        )
                    }
                </FormItem>

                
                <FormItem>
                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        提交
                    </Button>
                </FormItem>
            </Form>
        )
    }
}
export default Form.create()(Select1);
